<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>appendChild</title>
	<style type="text/css">
	   ul{list-style: none;padding:0;margin:0;}
		li{
			list-style: none;
			background-color:red;
			margin: 5px;
			line-height: 25px;
			float:left;
			color: #fff;
			padding: 5px;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
		//创建DOM元素
		  //createElement(标签名) 创建一个节点
		  //appendChild(节点)     追加一个节点
		  //为UL插入LI
        var btn1=document.getElementById('btn1');
        var box=document.getElementById('box');
        var valText=document.getElementById('valText');
        
        btn1.onclick=function(){
            // 创建一个LI节点存入内存
        	var li=document.createElement('li');
        	li.innerHTML=valText.value;
        	//往指定的父类存入这个节点（appendChild()）
            box.appendChild(li);
        };


		  //插入元素
		  //insertBefore(节点，原有节点)  在已有元素前插入
		  //倒序插入LI




		//删除DOM元素 删除一个节点
		  //删除LI


		}
	</script>
</head>
<body>
	<input type="text" id="valText" >
	<input type="button"  id="btn1" value="创建一个节点">
	<ul id="box">

	</ul>
</body>
</html>